<template>
	<view class="container">
		<!-- 设置白色背景防止软键盘把下部绝对定位元素顶上来盖住输入框等 -->
		<view class="login-wrapper">
			<!-- #ifdef H5 -->
			<view class="welcome pc">贸易平台注册</view>
			<view class="welcome sp">
				<image src="/static/missing-face.png" mode="scaleToFill"></image>
				注册
			</view>
			<!-- #endif -->
			<!-- #ifndef H5 -->
			<view class="welcome">
				<image src="/static/missing-face.png" mode="scaleToFill"></image>
				注册
			</view>
			<!-- #endif -->

			<view class="input-content">
				<view class="input-item">
					<text class="icon icon-phone"></text>
					<input type="number" :value="phone" placeholder="输入手机号" maxlength="11" data-key="phone" @input="inputChange" />
				</view>
				<view class="input-item">
					<text class="icon icon-suo"></text>
					<view class="flex-item">
						<input type="mobile" value="" placeholder="输入验证码" maxlength="6" data-key="verifyCode" @input="inputChange" />
						<button class="code-btn" :disabled="sendDisabled" @click="doGetVerify">{{ sendText }}</button>
					</view>
				</view>
				<view class="input-item">
					<text class="icon icon-suo"></text>
					<input type="mobile" value="" placeholder="输入密码" maxlength="20" password data-key="password" @input="inputChange" />
				</view>
				<view class="input-item">
					<text class="icon icon-suo"></text>
					<input type="mobile" value="" placeholder="确认密码" maxlength="20" password data-key="password2" @input="inputChange"
					 @confirm="doRegister" />
				</view>
			</view>
			<button type="primary" class="confirm-btn" @click="doRegister" :disabled="submiting">注册</button>

			<view class="register-section">
				已经有账号?
				<text @click="toLogin">马上登录</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				phone: '',
				password: '',
				submiting: false,
				sendText: '获取验证码',
				verifyCode: '',
				sendDisabled: false
			}
		},
		onLoad() {},
		methods: {
			...mapMutations(['login']),
			inputChange(e) {
				const key = e.currentTarget.dataset.key
				this[key] = e.detail.value
			},
			toLogin() {
				uni.navigateTo({
					url: '/pages/public/login'
				})
			},
			doGetVerify() {
				if (!this.phone || this.phone.length != 11) {
					this.$api.msg('请输入11位中国手机号')
					return
				}
				this.$api.request('/sms/sendsms', {
					phone: this.phone
				}, {
					method: 'GET'
				}).then(res => {
					this.sendDisabled = true
					let sec = 60
					let interval = setInterval(() => {
						sec--
						this.sendText = sec + 's'
						if (sec <= 0) {
							this.sendDisabled = false
							this.sendText = '获取验证码'
							clearInterval(interval)
						}
					}, 1000)
				})
			},
			doRegister() {
				if (this.phone.length !== 11) {
					this.$api.msg('请输入11位中国手机号')
					return
				}
				if (this.password.length < 6) {
					this.$api.msg('密码至少6位')
					return
				}
				if (this.password !== this.password2) {
					this.$api.msg('两次密码不一致')
					return
				}
				if (this.verifyCode.length < 1) {
					this.$api.msg('请输入验证码')
					return
				}
				this.submiting = true
				this.$api.request('/zruser/reg', {
					phone: this.phone,
					password: this.password,
					code: this.verifyCode
				}, {
					failback: failres => {
						this.submiting = false
						this.$api.msg(failres.message)
					}
				}).then(res => {
					//注册成功
					this.submiting = false
					this.$api.msg(res.message)
					this.$store.commit('login', res.data)
					uni.setStorageSync('userInfo', res.data)
					setTimeout(() => {
						uni.redirectTo({
							url: './step01'
						})
					}, 500)
				})
			}
		}
	}
</script>

<style lang="scss">
	/* #ifdef H5 */

	@media screen and (min-width: 750px) {
		.container {
			display: flex;
			align-items: center;
			overflow: hidden;
			width: 100vw;
			height: 100vh;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center center;
			background-image: url('');
		}
	}

	/* #endif */
</style>
